
<template>
 <div class="mdeditor">
  <div class="mdeditor-left">
    <NoticeCard />
    <div class="mdeditor-left-directory">
      <h2>目录</h2>
      <n-divider />
      <MdCatalog
      :editorId="state.id" 
      :scrollElement="scrollElement"
      :theme="state.theme" />
    </div>
  </div>
  <div class="mdeditor-right">
    <div class="mdeditor-right-title">
      <h1 class="kaiti">
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="blogDetails?.tagType"></use>
        </svg>
        {{ blogDetails?.title }}
      </h1>
      <div class="mdeditor-right-title_icons">
        <span v-if="blogDetails?.author">
          <i class="iconfont icon-yonghu1"></i>
          {{ blogDetails?.author }}.{{ blogDetails?.address }}
        </span>
        <span v-if="blogDetails?.system">
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="blogDetails?.system"></use>
          </svg>
          {{ blogDetails?.system.split('-')[1] }}
        </span>
        <span v-if="blogDetails?.browser">
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="blogDetails?.browser"></use>
          </svg>
          {{ blogDetails?.browser.split('-')[1] }}
        </span>
        <span v-if="blogDetails?.createTime">
          <i class="iconfont icon-shijian1"></i>
          {{ blogDetails?.createTime }}
        </span>
        <span v-if="blogDetails?.view">
          <i class="iconfont icon-chakan2"></i>
          {{ blogDetails?.view }}
        </span>
        <span v-if="blogDetails?.like">
          <i class="iconfont icon-tuijian2"></i>
          {{ blogDetails?.like }}
        </span>
        <span v-if="blogDetails?.comment">
          <i class="iconfont icon-xinxi11"></i>
          {{ blogDetails?.comment }}
        </span>
      </div>
    </div>
    <MdPreview 
    :editorId="state.id" 
    :modelValue="state.content" 
    :theme="state.theme"
    :showCodeRowNumber="state.showCodeRowNumber"
    />
  </div>
  <div class="mdeditor-rights">
    <AbouteSite />
  </div>
 </div>
</template>

<script setup lang="ts">
import { MdCatalog,MdPreview  } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import { useScrollTop } from '~/composables/useScroll';
const state = reactive({
  theme: 'light',
  id: 'my-editor',
  content:"",
  showCodeRowNumber:true,
});
const props = defineProps({
  blogDetails:Object
})
const scrollElement = document.getElementById('masking');
const scrollTop = useScrollTop()
watch(scrollTop,() => {
  let el = document.getElementsByClassName('mdeditor-left-directory')
    if(scrollTop.value >= 200){
      if(el[0]){
        el[0].style.position = 'fixed'
        el[0].style.top = '80px'
      }
    } else{
      if(el[0]){
        el[0].style.position = ''
      }
    }
})
onMounted(()=>{
  nextTick(() => {
    state.content = props.blogDetails?.content
    })
  })
</script>

<style scoped lang="scss">
.mdeditor{
 display: flex;
 width: 100%;
 justify-content: space-between;
 &-left{
  width: 250px;
  &-directory{
    transition: all 0.5s;
    width: 230px;
    background-color: rgba(255, 255, 255,.6);
    padding: 20px 10px;
    border-radius: 6px;
    height: auto;
    overflow: auto;
    h2{
      font-size: 18px;
      font-weight: 600;
      text-align: center;
    }
  }
 }
 &-right{
  margin-left: 10px;
  background-color: rgba(255, 255, 255,.6);
  border-radius: 6px;
  padding: 20px;
  margin-right: 10px;
  margin-left: 10px;
  height: auto;
  width: calc(100% - 560px) ;
  &-title{
    h1{
      margin-bottom: 20px;
      font-size: 24px;
      line-height: 30px;
      font-weight: 600;
      text-align: center;
    }
    &_icons{
      // white-space: nowrap;
    }
    span{
      font-size: 14px;
      margin-right: 20px;
      color: #666;
      display: inline-flex;
      align-items:center;
      .icon{
        margin-right: 5px;
      }
      .iconfont{
        margin-right: 5px;
      }
    }
  }
 }
 &-rights{
  width: 230px;
 }
 .md-editor-catalog{
  background-color: transparent;
  font-size: 16px;
 }
 .md-editor-previewOnly{
  background-color: transparent;
  height: auto;
 }
}
</style>